<template>
	<view class="xc-wrap-grey" style="">
		<view class="xp-view-profile" style="background-image: url('https://shanghaihuxi.cn/image/999.jpg');">
			<section>
				<xc-uv-clogin-loginform ref="xc-uv-clogin-loginform"
					@onLoginSuccess="onLoginSuccess"></xc-uv-clogin-loginform>
			</section>
		</view>
		<view>

			<!-- 	<uv-avatar v-if="sr.userinfo!=null" :src="sr.userinfo.avatar" shape="circle" size="100"
				hairline style="width:50rpx;height:50rpx"></uv-avatar> -->

			<image v-if="sr.userinfo!=null" :src="sr.userinfo.avatar" style="margin:20rpx 40rpx;
			border-radius: 150rpx;width:100rpx;height:100rpx;">

			</image>

			<uv-button v-if="sr.userinfo==null|| sr.userinfo.mobile==null||sr.userinfo.mobile==''" text="立即登录"
				size="normal" @tap="control_clickLogin" style="margin-top:0rpx"></uv-button>

			<view v-if="sr.userinfo!=null && sr.userinfo.mobile!=null && sr.userinfo.mobile!=''" class="xp-nickname"
				style="margin-left:20rpx;width: 100%;text-align: center;margin-top: -100rpx;color:orangered;">
				{{sr.userinfo.nickname}}
				岗位：{{sr.userinfo.shenfen == null? '无' : sr.userinfo.shenfen == 3? '现场施工员' : sr.userinfo.shenfen === 1? '区域负责人' : sr.userinfo.shenfen === 2? '项目经理' : '无'}}

			</view>
		</view>

		<view style="height:30rpx"></view>
		<!-- 如果用户登录了 -->
		<!-- 无身份 -->
		<view class="container" v-if="sr.userinfo!=null && sr.userinfo.shenfen==0"
			style="margin:20px 20px;padding-top:30rpx">
			<view class="item" @tap="go(item.id)" v-for="(item, index) in itemList1" :key="index">
				<image :src="item.imageUrl" mode="aspectFill" style="width:80rpx;height:80rpx"></image>
				<text style="font-size:12px;color:#4F4F53">{{item.text}}</text>
			</view>
		</view>

		<!-- 区域负责人和项目经理 -->
		<view class="container" v-if="sr.userinfo!=null && sr.userinfo.shenfen <3 && sr.userinfo.shenfen >0"
			style="margin:20px 20px;padding-top:30rpx">
			<view class="item" @tap="go(item.id)" v-for="(item, index) in itemList3" :key="index">
				<image :src="item.imageUrl" mode="aspectFill" style="width:80rpx;height:80rpx"></image>
				<text style="font-size:12px;color:#4F4F53">{{item.text}}</text>
			</view>
		</view>

	<!-- 现场施工员 -->
		<view class="container" v-if="sr.userinfo!=null && sr.userinfo.shenfen ==3"
			style="margin:20px 20px;padding-top:30rpx">
			<view class="item" @tap="go(item.id)" v-for="(item, index) in itemList4" :key="index">
				<image :src="item.imageUrl" mode="aspectFill" style="width:80rpx;height:80rpx"></image>
				<text style="font-size:12px;color:#4F4F53">{{item.text}}</text>
			</view>
		</view>


		<view class="container" style="margin:20px 20px;padding-top:30rpx">
			<view class="item" @tap="go(item.id)" v-for="(item, index) in itemList2" :key="index">
				<image :src="item.imageUrl" mode="aspectFill" style="width:80rpx;height:80rpx"></image>
				<text style="font-size:12px;color:#4F4F53">{{item.text}}</text>
			</view>
		</view>

	
		<view class="xp-view-logout" v-if="sr.userinfo!=null">
			<uv-button type="primary" :text="$t('xclogin.me.btn_logout')" @tap="control_logout"></uv-button>
		</view>
	
		<xa-uv-bottom-tabbar />
	</view>
</template>

<script>
	import config from "@/config/config.js";
	import xcUniappUtils from '@/library/xcore/js/XcUniappUtils.js';
	import xcHttpUtils from '@/library/xcore/js/XcHttpUtils.js';
	import xcViewUtils from '@/library/xcore/js/XcViewUtils.js';
	import xcCloginUtils from '@/library/xcore/js/XcCloginUtils.js';
	import xcCWeixinMpLoginUtils from '@/library/xcore/js/XcCWeixinMpLoginUtils.js';
	import {
		xsStringUtils,
		xsDateUtils,
		xsArrayUtils
	} from 'xstack-for-javascript';


	export default {
		data() {
			return {
				itemList1: [{
						imageUrl: '/static/11.png',
						text: '个人资料',
						id: 1,
					},
					{
						imageUrl: '/static/22.png',
						text: '岗位申请',
						id: 2,
					},

				],

				itemList3: [{
						imageUrl: '/static/11.png',
						text: '个人资料',
						id: 1,
					},
					{
						imageUrl: '/static/55.png',
						text: '报警记录',
						id: 5,
					},
					{
						imageUrl: '/static/55.png',
						text: '工单记录',
						id: 7,
					},
					{
						imageUrl: '/static/55.png',
						text: '工单分析',
						id: 14,
					},
					{
						imageUrl: '/static/77.png',
						text: '证件列表',
						id: 8,
					},
					{
						imageUrl: '/static/88.png',
						text: '打卡',
						id: 13,
					},
					{
						imageUrl: '/static/88.png',
						text: '打卡记录',
						id: 19,
					}
				],
				itemList4: [{
						imageUrl: '/static/11.png',
						text: '个人资料',
						id: 1,
					},
					{
						imageUrl: '/static/33.png',
						text: '报警提交',
						id: 3,
					},
					{
						imageUrl: '/static/44.png',
						text: '报警提交记录',
						id: 4,
					},

					{
						imageUrl: '/static/66.png',
						text: '工单提交记录',
						id: 6,
					},


					{
						imageUrl: '/static/88.png',
						text: '工单反馈',
						id: 9,
					},
					{
						imageUrl: '/static/88.png',
						text: '打卡',
						id: 13,
					}
				],
				itemList2: [{
						imageUrl: '/static/q.png',
						text: '联系我们',
						id: 10,
					},
					{
						imageUrl: '/static/q2.png',
						text: '服务协议',
						id: 11,
					},
					{
						imageUrl: '/static/q3.png',
						text: '隐私政策',
						id: 12,
					}
				],

				config: config,
				xsStringUtils: xsStringUtils,
				xsDateUtils: xsDateUtils,
				sp: {
					id: null
				},
				sr: {
					userinfo: null
				},
				control: {},
			}
		},
		onLoad(options) {
			let that = this;
			that.sp.id = options.id;
			that.xinit();
		},
		onShow() {
			let that = this;
			xcUniappUtils.onShow(function() {
				that.public_show();
			});
		},
		onPullDownRefresh() {
			let that = this;
			setTimeout(function() {
				that.public_show();
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			go(id) {
				if (id == 1) {
					uni.navigateTo({
						url: '/pages/xclogin/me_profile'
					});
				}
				if (id == 2) {
					uni.navigateTo({
						url: '/pages/xclogin/me_profile2'
					});
				}
				if (id == 3) {
					uni.navigateTo({
						url: '/pages/xclogin/yujingtijiao'
					});
				}
				if (id == 4) {
					uni.navigateTo({
						url: '/pages/xcdemo/yujing'
					});
				}
				if (id == 5) {
					uni.navigateTo({
						url: '/pages/xcdemo/yujingall'
					});
				}
				if (id == 6) {
					uni.navigateTo({
						url: '/pages/xcdemo/baobiao'
					});
				}
				if (id == 7) {
					uni.navigateTo({
						url: '/pages/xcdemo/baobiao_fenbao'
					});
				}
				if (id == 8) {
					uni.navigateTo({
						url: '/pages/xcdemo/zhengjian'
					});
				}
				if (id == 9) {
					uni.navigateTo({
						url: '/pages/xcdemo/index'
					});
				}

				if (id == 10) {
					uni.navigateTo({
						url: '/pages/xclogin/policy?type=contactme'
					});
				}
				if (id == 11) {
					uni.navigateTo({
						url: '/pages/xclogin/policy?type=service'
					});
				}
				if (id == 12) {
					uni.navigateTo({
						url: '/pages/xclogin/policy?type=private'
					});
				}
				if (id == 13) {
					uni.navigateTo({
						url: '/pages/article/map'
					});
				}
				if (id == 14) {
					uni.navigateTo({
						url: '/pages/article/baobiaofenxi'
					});
				}
				if (id == 19) {
					uni.navigateTo({
						url: '/pages/article/dakajilu_fenbao'
					});
				}
			},
			xinit() {
				let that = this;
			},
			public_reset() {
				let that = this;
				that.public_show();
			},
			public_show() {
				let that = this;
				xcCloginUtils.getUserinfo(function(userinfo) {
					that.sr.userinfo = userinfo;
				});
			},
			onLoginSuccess(userinfo) {
				let that = this;
				that.sr.userinfo = userinfo;
			},
			control_clickLogin() {
				let that = this;
				that.$refs["xc-uv-clogin-loginform"].public_open();
			},
			control_logout() {
				let that = this;
				that.sr.userinfo = null;
				xcCloginUtils.clearSession();
				// #ifdef H5 || APP-PLUS
				// xcCloginUtils.toLoginPage();
				// #endif
			},
		}
	}
</script>


<style lang="scss">
	.xp-view-profile {


		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
		width: 100%;
		height: 100vh;


		height: 200px;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 40px;
	}

	.xp-view-logout {
		padding: $uni-spacing-row-lg $uni-spacing-row-base;
	}

	.xp-nickname {
		color: white;
	}

	.content {
		display: flex;
		flex-direction: column;

	}

	.upView {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-left: 12px;
		width: calc(100vw - 24px);
		margin-top: 10px;
		padding: 4px 0px;
		background-color: white;

	}

	.headLine {

		height: 30px;
		line-height: 30px;
		margin: 10px 15px;
		font-size: 20px;
	}

	.container {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		background: white;
		// 	background-image: url('/static/8.png');
		// 	background-repeat: no-repeat;
		// 	background-size: cover;
		// 	background-position: center center;




	}

	.item {

		width: 30%;
		/* 大约占三分之一的宽度，考虑到间距 */
		margin-bottom: 20px;
		margin-right: 5%;
		/* 元素之间的水平间距 */
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.item:nth-child(3n) {
		margin-right: 0;
		/* 每 3 个元素去掉右边距 */
	}

	.item image {
		width: 100%;
		height: 100px;
		/* 可根据需求调整图片高度 */
	}

	.item text {
		// margin-top: 10px;
	}
</style>
